<template>
  <div class="modelFather">
    <h1>这里是子组件</h1>
    <input type="text" :value="userName" @blur="changeHandle" />
    <br />
    <!-- 测试原生model -->
    <!--将接收的value值赋给input元素的value属性，目的是：为了呈现数据 -->
    <!--给input元素绑定原生input事件，触发input事件时，进而触发update:model-value事件-->
    <!-- 用emit发送update:model-value事件，值为e.target.value，就是input输入的值 -->
    <input
      type="text"
      :value="abc"
      @input="emit('update:abc', $event.target.value)" 
    />
  </div>
</template>
<script lang="ts" setup>
import emitter from "@/utils/emitter";
import { ref } from "vue";
// 接收props
defineProps(["abc"]);
// 声明事件
// 这里使用组件之间通信，defineEmits，括号中是事件
const emit = defineEmits(["update:abc"]);

function changeHandle(e) {
  // console.log(e.target.value);
  emitter.emit("a", e.target.value);
}
</script>
<style scoped>
.modelFather {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>